<template>
	<view class="">
		<!-- 导航栏 -->
		<u-navbar :is-back="false" :background="background">
			<view class="slot-wrap">
				<view class="search-wrap" @click="goSearch()">
					<view class="u-search-inner">
						<u-icon name="search" color="#909399" :size="28"></u-icon>
						<text class="u-search-text">搜索商品</text>
					</view>
				</view>
				<view class="navbar-right">
					<view class="message-box right-item" @click="getTellModel()">
						<u-icon name="phone" size="38" color="#333333"></u-icon>
						<!-- <u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge> -->
					</view>
					<!-- <view class="dot-box right-item">
						<u-icon name="calendar-fill" size="38" color="#333333"></u-icon>
						<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
					</view> -->
				</view>
			</view>
		</u-navbar>
		<!-- 轮播图 -->
		<view class="wrap"><u-swiper :list="bannerlist" name="imageUrl" img-mode="scaleToFill"></u-swiper></view>
		<view class="content">
			<u-gap height="20" bg-color="#ffffff"></u-gap>
			<!-- 公告 -->
			<view class="notice"><u-notice-bar type="success" :more-icon="false" :font-size="26" mode="horizontal" :list="noticelist" padding="12rpx 16rpx"></u-notice-bar></view>
			<!-- 商品分类 -->
			<view class="homeMenu">
				<u-grid :col="4" :border="false">
					<block class="" v-for="(item, index) in homeMenuList" :key="index">
						<u-grid-item @click="goMenu(item.id)">
							<u-avatar v-if="item.pic != null" :src="item.pic" size="100"></u-avatar>
							<u-avatar v-else src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg" size="100"></u-avatar>
							<view class="grid-text">{{ item.name }}</view>
						</u-grid-item>
					</block>
				</u-grid>
			</view>
			<!-- 优惠券导航 -->
			<view class="coupon-banner u-m-t-20 u-m-b-20" @click="goCoupon">
				<u-image width="100%" height="200rpx" src="/static/coupon-banner.png"></u-image>
			</view>
			<u-gap height="20" bg-color="#ffffff"></u-gap>
			<!-- 今日特价商品 -->
			<view class="u-m-t-20 u-m-b-20 u-p-l-24 u-p-r-24">
				<view class="u-margin-bottom-25">
					<u-section title="今日特价" sub-title="查看更多" font-size="36" color="success" @click="goMoreGoods(1)"></u-section>
				</view>
				<view class="goodsList">
					<view class="goods">
						<view class="goods-item" v-for="(item, index) in specialGoodsList" :key="index" @click="goGoods(item.id)">
							<view>
								<u-image width="100%" height="300rpx" :src="item.img" :fade="true" duration="450"><u-loading slot="loading"></u-loading></u-image>
							</view>
							<view class="goods-item-title u-line-2">{{ item.name }}</view>
							<view class="goods-item-unit">{{ item.toreInfo }}</view>
							<view class="goods-item-price">
								<view>
									<text class="m-price">￥</text>
									{{ item.sellPrice != null ? item.sellPrice : '暂无' }}
									<!-- <text class="unit">原价:{{ item.originalPrice != null ? item.originalPrice : '未认证' }}</text> -->
									<!-- <text class="unit">/瓶</text> -->
								</view>
								<view><u-icon size="46" color="#17933f" name="plus-circle-fill"></u-icon></view>
							</view>
						</view>
					</view>
					<u-empty v-show="isSpecialEmpty" text="没有商品信息" mode="list"></u-empty>
				</view>
			</view>
			<!-- 优惠券导航 -->
			<view class="coupon-banner u-m-t-20 u-m-b-20" @click="goCoupon">
				<u-image width="100%" height="200rpx" src="/static/coupon-banner.png"></u-image>
			</view>
			<u-gap height="20" bg-color="#ffffff"></u-gap>
			<!-- 今日上新 -->
			<view class="u-m-t-20 u-m-b-20 u-p-l-24 u-p-r-24">
				<view class="u-margin-bottom-25">
					<u-section title="今日上新" sub-title="查看更多" font-size="36" color="success" @click="goMoreGoods(2)"></u-section>
				</view>
				<view class="goodsList">
					<view class="goods">
						<view class="goods-item" v-for="(item, index) in newGoodsList" :key="index" @click="goGoods(item.id)">
							<view>
								<u-image width="100%" height="300rpx" :src="item.img" :fade="true" duration="450"><u-loading slot="loading"></u-loading></u-image>
							</view>
							<view class="goods-item-title u-line-2">{{ item.name }}</view>
							<view class="goods-item-unit">{{ item.toreInfo }}</view>
							<view class="goods-item-price">
								<view>
									<text class="m-price">￥</text>
									{{ item.sellPrice != null ? item.sellPrice : '暂无' }}
									<!-- <text class="unit">原价:{{ item.originalPrice != null ? item.originalPrice : '未认证' }}</text> -->
									<!-- <text class="unit">/瓶</text> -->
								</view>
								<view><u-icon size="46" color="#17933f" name="plus-circle-fill"></u-icon></view>
							</view>
						</view>
					</view>
					<u-empty v-show="isNewEmpty" text="没有商品信息" mode="list"></u-empty>
				</view>
			</view>
			<u-gap height="20" bg-color="#ffffff"></u-gap>
		</view>
		<view><u-toast ref="uToast" /></view>
		<!-- 弹窗公告 -->
		<view>
			<u-popup v-model="noticeShow" mode="center" width="500rpx" height="800rpx" border-radius="16" :closeable="true">
				<view class="notice-popup">
					<view class="notice-popup-title">公告</view>
					<view class="notice-popup-line"><u-line color="#17933f" :hair-line="false" /></view>
					<view class="notice-popup-con">
						<scroll-view scroll-y="true" style="height: 100%;">
							<view class="" style="width: 450rpx;min-height: 200rpx;line-height: 1.5;letter-spacing: 2rpx;">
								<u-parse :html="content"></u-parse>
							</view>
						</scroll-view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 电话 -->
		<u-popup v-model="tellModel" mode="center" border-radius="14" width="480rpx" height="220rpx">
			<view style="margin: 0,auto;">
				<u-cell-group>
					<u-cell-item icon="phone-fill" :title="phoneNum" :arrow="false" @click="tell(phoneNum)" value="客服电话1">
					</u-cell-item>
					<u-cell-item icon="server-fill" :title="phoneNum2" :arrow="false" @click="tell(phoneNum2)" value="客服电话2">
					</u-cell-item>
				</u-cell-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			//头部搜索
			keyword: '',
			background: {
				backgroundColor: '#ffffff'
				// 导航栏背景图
				// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				// 还可以设置背景图size属性
				// backgroundSize: 'cover',

				// 渐变色
				//backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
			},
			//顶部banner
			bannerlist: [],
			//商品列表
			specialGoodsList:[],//特价商品
			hotGoodsList:[],//热卖商品
			newGoodsList:[],//上新商品
			//
			page: 0,
			size: 10,
			sort: 'sort,desc',
			isHot: 0,//热卖
			isNew: 0,//新品
			specialOffer:0,//特价
			//公告
			noticelist: [],
			//
			isSpecialEmpty: false,
			isNewEmpty: false,
			isHotEmpty: false,
			//首页分类
			homeMenuList: [],
			//
			userInfo: {},
			//电话
			phoneNum: '',
			phoneNum2: '',
			tellModel:false,
			//公告
			noticeShow: false,
			content: '',
		};
	},
	onLoad() {
		this.getData();
		this.getHomeMenu();
		this.getBanner();
		this.getFixed();
		this.getNotice();
		//#ifdef MP-WEIXIN
		this.wxLogin();
		//#endif
	},
	onShow() {
		//this.getBanner();
	},
	onReachBottom() {
	},
	methods: {
		//公告
		getNotice() {
			let _t = this;
			_t.$u.api.notice().then(res => {
				console.log('notice==========')
				console.log(res)
				if(res.data.content[0]){
					_t.noticeShow = true;
					_t.content = res.data.content[0].content;
					setTimeout(() => {
						_t.noticeShow = false;
					}, 6000);
				}

			});
		},
		//配置信息
		getFixed() {
			let _t = this;
			_t.$u.api.getFixedInfo().then(res => {
				_t.noticelist = [];
				res.data.content.forEach(item => {
					if (item.value == 'HOME_PAGE_ANNOUNCEMENT') {
						_t.noticelist.push(item.content);
					}
					if (item.value == 'SERVICE_TEL') {
						_t.phoneNum = item.content;
					}
					if (item.value == 'SERVICE_TEL2') {
						_t.phoneNum2 = item.content;
					}
				});
			});
		},
		//获取banner
		getBanner() {
			let _t = this;
			_t.$u.api.getBanner().then(res => {
				_t.bannerlist = res.data;
			});
		},
		//获取商品分类
		getHomeMenu() {
			let _t = this;
			_t.$u.api.getHomeMenu().then(res => {
				_t.homeMenuList = res.data;
			});
		},
		//获取商品数据
		getData() {
			let _t =this;
			setTimeout(() => {
				_t.getSpecialGoods();
				_t.getNewGoods();
			}, 1500);
		},
		//特价商品
		getSpecialGoods() {
			let _t =this;
			_t.isSpecialEmpty = false;
			let formData = {
				page:0,
				size:6,
				specialOffer:1,
				sort: _t.sort,
			};
			_t.$u.api.getGoodsList(formData).then(res => {
				console.log("getSpecialGoodsList")
				console.log(res)
				_t.specialGoodsList = res.data.content;
				if(_t.specialGoodsList.length == 0){
					_t.isSpecialEmpty = true;
				}
			});
		},
		//上新商品
		getNewGoods() {
			let _t =this;
			_t.isNewEmpty = false;
			let formData = {
				page:0,
				size:6,
				isNew:1,
				sort: _t.sort,
			};
			_t.$u.api.getGoodsList(formData).then(res => {
				console.log("getNewGoodsList")
				console.log(res)
				_t.newGoodsList = res.data.content;
				if(_t.newGoodsList.length == 0){
					_t.isNewEmpty = true;
				}
			});
		},
		//跳转详情
		goGoods(goodsId) {
			console.log("this.userInfo==========");
			console.log(this.userInfo);
			if (this.userInfo.realName == false) {
				this.$refs.uToast.show({
					title: '当前用户未认证，无法查看更多内容',
					type: 'error'
				});
			} else {
				this.$u.route({
					type: 'to',
					params: {
						goodsId: goodsId
					},
					url: '/pages/goods/index'
				});
			}
		},
		//电话
		getTellModel() {
			let _t = this;
			_t.tellModel = true;
		},
		tell(phone) {
			uni.makePhoneCall({
				phoneNumber:phone//仅为示例
			});
		},
		//跳转
		goMenu(cateId) {
			uni.removeStorageSync('cateId');
			uni.setStorageSync('cateId', cateId);
			this.$u.route({
				type: 'tab',
				/* params: {
					cateId: cateId
				}, */
				url: '/pages/menu/index'
			});
		},
		goSearch() {
			uni.navigateTo({
				url: '/pages/search/index'
			});
		},
		goCoupon() {
			uni.navigateTo({
				url: '/pages/coupon/index'
			});
		},
		goMoreGoods(type) {
			uni.navigateTo({
				url: '/pages/goods/list?type='+type
			});
		},
		//微信登录
		wxLogin(){
			let _t = this;
			uni.login({
			  provider: 'weixin',
			  success: function (loginRes) {
			    console.log("loginRes.authResult");
			    console.log(loginRes.authResult);
				console.log("loginRes");
			    console.log(loginRes);
				if(loginRes.code){
					const wxCode = loginRes.code;
					console.log('code:' + wxCode);
					uni.setStorageSync('wx_code', wxCode);
					//获取用户oppenid
					_t.$u.api.xcxLogin({ code: wxCode }).then(res => {
						console.log('xcxLogin_res=====');
						console.log(res);
						//新微信用户
						if (!res.data.cache_key) {
							uni.setStorageSync('token', res.data.token);
							_t.userInfo = res.data.user.user;
							uni.setStorageSync('userInfo', res.data.user.user);
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
					});
				}
			  }
			});
		},
	}
};
</script>

<style lang="scss">
page {
	//background-color: #f3f4f6;
	background-color: #ffffff;
}
.content {
	background-color: #ffffff;
}
.coupon-banner {
	background-color: #ffffff;
	height: 200rpx;
	width: 100%;
	/* background-image: url(../../static/coupon-banner.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center; */
}
.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
	.search-wrap {
		padding: 18rpx 30rpx;
		flex: 1;
		.u-search-inner {
			background-color: #f3f4f6;
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 16rpx;
		}

		.u-search-text {
			font-size: 26rpx;
			color: $u-tips-color;
			margin-left: 10rpx;
		}
	}
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		.right-item {
			margin: 0 12rpx;
			position: relative;
			color: #ffffff;
			display: flex;
		}
	}
}

.notice {
}
.homeMenu {
	background-color: #ffffff;
	.grid-text {
		padding-top: 10rpx;
		font-size: 26rpx;
		color: #666666;
	}
}

.goodsList {
	display: block;
	background-color: #ffffff;
	.goods {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.goods-item {
			box-shadow: 2px 2px 5px #C8C9CC;
			background: #ffffff;
			flex: 0 0 335rpx;
			height: auto;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			.goods-item-title {
				padding: 10rpx 10rpx 4rpx 10rpx;
				font-size: 28rpx;
			}
			.goods-item-unit {
				padding: 4rpx 10rpx;
				font-size: 24rpx;
				color: #c8c9cc;
				font-weight: normal;
			}
			.goods-item-price {
				padding: 4rpx 10rpx;
				font-size: 32rpx;
				color: #ff9900;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				.unit {
					padding-left: 6rpx;
					font-size: 24rpx;
					color: #c8c9cc;
					font-weight: normal;
				}
				.m-price {
					font-size: 24rpx;
					font-weight: normal;
				}
				.originalPrice {
					font-size: 26rpx;
					font-weight: normal;
					color: #666666;
				}
			}
		}
	}
}

.notice-popup {
	padding: 24rpx;
	.notice-popup-title {
		font-size: 36rpx;
		color: #17933f;
		font-weight: bold;
		text-align: center;
	}
	.notice-popup-line {
		margin: 8rpx 0;
	}
	.notice-popup-con {
		font-size: 32rpx;
		font-weight: bold;
		padding-top: 8rpx;
		/* background-color: #008080; */
		letter-spacing: 0.4rpx;
		line-height: 32rpx;
	}
}
</style>
